<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" append-to-body :close-on-click-modal="false" width="850px">
    <div class="form-box">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入名称" />
        </el-form-item>

        <el-form-item label="链接类型">
          <el-radio-group :disabled="type=='zhubo'||type=='xhLunbo'" v-model="form.isOutLink">
            <el-radio :label="true">外链</el-radio>
            <el-radio :label="false">内部页面</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="!form.isOutLink&&type!='lunbo'" label="内部页面" prop="link">
          <el-select filterable v-if="type=='menuBox'" v-model="form.link" placeholder="请选择内部页面" clearable @change="menuChange">
            <el-option v-for="dict in menuInsideArr" :key="dict.sort" :label="dict.name" :value="dict.link" />
          </el-select>
          <el-select filterable v-if="type=='imgBtnBox'" v-model="form.link" placeholder="请选择内部页面" clearable @change="menuChange">
            <el-option v-for="dict in imgBtnInsideArr" :key="dict.sort" :label="dict.name" :value="dict.link" />
          </el-select>
        </el-form-item>
        <el-form-item label="跳转链接" prop="link">
          <el-input v-model="form.link" type="textarea" style="width: 400px;" :placeholder="form.isOutLink?'请输入手机端跳转链接，请填写完整链接地址(https://或http://开头)':'请输入手机端跳转链接，可以在手机浏览器打开目标页面后复制链接到此处。'" />
        </el-form-item>

        <el-form-item label="排序" prop="sort">
          <el-input v-model="form.sort" placeholder="请输入排序" type="number" />
        </el-form-item>
        <el-form-item label="图片" prop="img" :class="{'hiddenupload':imgShowList.length}">
          <el-upload :action="uploadImgUrl" :file-list="imgShowList" :show-file-list="true" list-type="picture-card" :limit="1" :on-success="handleUploadSuccess" :on-remove="handleRemove" :on-preview="handlePictureCardPreview" :headers="headers">
            <i class="el-icon-plus"></i>
          </el-upload>
          <div class="tip" v-if="type=='lunbo'">轮播图建议尺寸：690px*192px</div>
          <div class="tip" v-if="type=='zhubo'">主播图建议尺寸：300px*240px</div>
          <div class="tip" v-if="type=='imgBtnBox'">图片建议尺寸：334px*178px</div>
        </el-form-item>
        <!-- <el-form-item label="启用状态">
          <el-radio-group v-model="form.state">
            <el-radio  :label="1">启用</el-radio>
            <el-radio  :label="2">禁用</el-radio>
          </el-radio-group>
        </el-form-item> -->
        <!-- 富文本 -->
        <!-- <div class="tip" v-if="form.decorationTypeArea==1">
          提示：在没有设置跳转链接时，以下文本框内容，在点击图片的时候展示，设置了跳转链接则文本失效。
        </div>
        <div v-if="form.decorationTypeArea==1" style="border: 1px solid #ccc; margin-top:10px">
          <myEditor v-model="form.context" @input="editorInput"></myEditor>
        </div> -->

        <div class="center">
          <el-button @click="close()">取消</el-button>
          <el-button type="primary" @click="submitForm('form')" v-loading="loading">提交</el-button>
        </div>
      </el-form>
    </div>
  </el-dialog>
</template>

<script>
import myEditor from "@/components/WangEditor/index.vue";
import { getToken } from "@/utils/auth";
export default {
  name: "",
  components: { myEditor },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      title: "新增",
      isEdit: false,
      imgShowList: [],
      // 表单参数
      form: {
        name: "",
        type: "",
        img: "",
        link: "",
        pcJump: "",
        context: "",
        state: 1,
        isOutLink:false
      },
      headers: {},
      rules: {
        img: [{ required: true, message: "请上传图片", trigger: "change" }],
      },
      type: "",

      menuInsideArr: [
        {
          img: "https://imgage.maimaihao.com/yuduhulian/h5/home/buyicon.png",
          name: "我要买号",
          link: "/pages/gameList/index",
          sort: 1,
          isOutLink: false,
        },
        {
          img: "https://imgage.maimaihao.com/yuduhulian/h5/home/huishouicon.png",
          name: "快速回收",
          link: "/pages/saleGameList/index?pageType=2&pageFrom=user",
          sort: 2,
          isOutLink: false,
        },
        {
          img: "https://imgage.maimaihao.com/yuduhulian/h5/home/kefuyanzheng.png",
          name: "客服验证",
          link: "/pages/kefuCheck/index?type=1",
          sort: 3,
          isOutLink: false,
        },
        {
          img: "https://imgage.maimaihao.com/yuduhulian/h5/home/jiaoliuqun.png",
          name: "交流群",
          link: "/pages/home/qqGroup",
          sort: 4,
          isOutLink: false,
        },
       
        
      ],
      imgBtnInsideArr: [
           
      ],
    };
  },
  computed: {
    shopInfo() {
      return this.$store.getters.shopInfo;
    },
  },
  created() {
    this.headers = {
      Authorization: "Bearer " + getToken(),
    };
    this.uploadImgUrl = process.env.VUE_APP_BASE_API + "/upload/image";
  },
  methods: {
    // editorInput(e) {
    //   this.form.context = e;
    // },

    // 打开弹窗
    open(flag, data, type) {
      console.log("%c Line:144 🍭 type", "color:#33a5ff", type);
      this.type = type;
      this.imgShowList = [];
      this.form = {
        name: "",
        img: "",
        link: "",
        sort: "",
        state: 1,
        isOutLink:false
      };
      if(type=='zhubo'||type=='xhLunbo'){
        this.form.isOutLink = true
      }
      if(type=='imgBtnBox'){
        this.getArticleTypes()
      }
      if(type=='menuBox'){
        this.menuInsideArr.length = 4
        if(this.shopInfo.groups.includes('5499')){
          this.menuInsideArr.push({
            img: "https://imgage.maimaihao.com/yuduhulian/h5/icon/guanfangdaishounew.png",
            name: "官方代售",
            link: "/pages/saleGameList/index?pageType=1&pageFrom=user",
            sort: 5,
            isOutLink: false,
          })
        }

         if(this.shopInfo.groups.includes('5505')){
          this.menuInsideArr.push({
            img: "https://imgage.maimaihao.com/yuduhulian/h5/icon/chuzu.png",
            name: "我要出租",
            link: "/pages/saleGameList/index?pageType=4&pageFrom=user",
            sort: 7,
            isOutLink: false,
          })
           this.menuInsideArr.push({
            img: "https://imgage.maimaihao.com/yuduhulian/h5/icon/sale.png",
            name: "我要租号",
            link: "/pages/saleGameList/index?pageType=5&pageFrom=user",
            sort: 8,
            isOutLink: false,
          })
        }
        this.menuInsideArr.push({
            img: "https://imgage.maimaihao.com/yuduhulian/h5/home/buyicon.png",
            name: "竞价回收",
            link: "/pages/saleGameList/index?pageType=3&pageFrom=user",
            sort: 6,
            isOutLink: false,
          })
        
      }

      if (flag == "edit") {
        this.title = "修改";
        this.isEdit = true;
        this.form = JSON.parse(JSON.stringify(data));
        this.imgShowList = [{ url: data.img, name: "" }];
      } else {
        this.isEdit = false;
      }
      this.dialogVisible = true;
    },
    //获取所有文章类型
    getArticleTypes(){
      this.imgBtnInsideArr = []
      const detailPageArr = ['aqbz','zhbp','ywjs','jyxz','tenantYsxy','tenantYhxy']
      this.getDicts("tenant_notice_type").then((res) => {
        //console.log("%c Line:271 🥕 res", "color:#42b983", res);
        if (res.data && res.data.length) {
          res.data.forEach((r,i)=>{
            const link = detailPageArr.includes(r.dictValue)?`/pages/noticeList/noticeDetail?noticeType=${r.dictValue}`:`/pages/noticeList/index?noticeType=${r.dictValue}&type=${r.dictLabel}`
            this.imgBtnInsideArr.push(
              {
                img: "",
                name:r.dictLabel,
                link: link,
                sort: i,
                isOutLink: false,
              }
            )
          })
        }
      });
    },

    // 重置
    reset() {
      this.$refs.form.resetFields();
    },
    // 选择内部页面
    menuChange(e){
      if(this.type=='imgBtnBox'){
        // 图片卡片
        this.imgBtnInsideArr.forEach(r=>{
          if(r.link==e){
            this.form.link = r.link
            if(!this.form.name){
              this.form.name = r.name
            }
            if(!this.form.img&&r.img){
              this.form.img = r.img
              this.imgShowList = [{ url: this.form.img, name: "" }];
            }
            // this.form = {...r}
            
          }
        })

      }
      if(this.type=='menuBox'){
        // 图片卡片
        this.menuInsideArr.forEach(r=>{
          if(r.link==e){
            this.form.link = r.link
            if(!this.form.name){
              this.form.name = r.name
            }
            if(!this.form.img&&r.img){
              this.form.img = r.img
              this.imgShowList = [{ url: this.form.img, name: "" }];
            }
          }
        })

      }

    },
    submitForm(formName) {
      this.$refs["" + formName].validate((valid) => {
        if (valid) {
          if (this.isEdit) {
            // 编辑
            this.$emit("editSuccess", this.form);
            this.dialogVisible = false;
          } else {
            // 新增
            this.$emit("addSuccess", this.form);
            this.dialogVisible = false;
          }
        } else {
          this.$alert("请填写完整！");
        }
      });
    },
    // 图片上传成功
    handleUploadSuccess(res, file, fileList) {
      if (res.code == 200) {
        // 取得新上传的文件
        this.imgShowList = [{ url: res.data.filePath, name: "" }];
        this.form.img = res.data.filePath;
      }
    },
    // 详情图片删除
    handleRemove(response, fileList, file) {
      this.imgShowList = [];
      this.form.img = "";
    },
    // 图片预览
    handlePictureCardPreview(file) {
      this.$viewerApi({
        images: [file.url],
      });
    },
    uploadNumber(file, fileList) {
      //限制图片数量
      this.$modal.msgError("最多只能上传1张图片");
    },
    close() {
      this.dialogVisible = false;
    },
  },
};
</script>
<style scoped lang="css">
.tip {
  color: red;
}
.center {
  text-align: center;
}
.form-box {
  padding-top: 20px;
}
</style>
